<template>
  <div class="gcsspage">
    <div class="gcsspageone">
      <van-icon name="arrow-left" style="font-size: 20px; position: absolute; left: 10px; top: 15px" @click="fun" />
      <span>国潮时尚</span>
    </div>
    <div class="gcsspagetwo">
      <van-search v-model="value" shape="round" placeholder="耐克"
        style="width: 350px; background-color: gainsboro; margin-top: 50px;" />
      <van-icon name="service-o" style="margin-top: 50px;" />
    </div>
    <div class="gcsspagethree">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index" @click="swp">
          <img v-lazy="image" style="width: 350px; border-radius: 10px; height: 148px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="gcsspagefour">
      <van-grid :column-num="5">
        <van-grid-item v-for="value in arr" :key="value" :icon="value.src" :text="value.txt" />
      </van-grid>
      <!-- <ClearanceSale></ClearanceSale> -->
      <div class="gcsspagefive">
        <span>品牌精选</span>
        <div class="gcsspagefive1">
          <div v-for="(v, index) in obj" :key="index" class="gcsspagefive2">
            <img :src="v" alt="" />
          </div>
        </div>
      </div>
    </div>
    <Store></Store>
  </div>
</template>

<script>
// import ClearanceSale from "../../../components/dl/home/ClearanceSale.vue";
// import Store from "../../../components/dl/home/Store.vue";
// import ClearanceSale from "../home/ClearanceSale.vue";
import Store from "../home/ClearanceSale.vue";
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  components: {
    // ClearanceSale,
    Store,
  },
  data() {
    return {
      images: [
        "https://pic.cdfgsanya.com/assets/upload/visual/3dc1742005c2bcaf205c55d7fddcfbd1.jpg?1657511383814",
        "https://pic.cdfgsanya.com/assets/upload/visual/07f8b34e02c8799edfdb4ce09e99deb8.jpg?1657510964792",
        "https://pic.cdfgsanya.com/assets/upload/visual/444778bb9ad818e1c7a1b0f7efd6c74e.png?1673343594031",
        "https://pic.cdfgsanya.com/assets/upload/visual/96cd60fe8cacd72eab5082948e8456e7.jpg?1657511004784",
      ],
      arr: [
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/f0bd48e7751657c17263c142b34effc5.png?1656398828082",
          txt: "手机",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/16374147109b9e99f578c4468efc8f58.png?1656398859728",
          txt: "游戏机",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/dd448bd8e1b6a92dc1b3bab937fd854a.png?1656398867444",
          txt: "耳机",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/2769589c83290ad99e0750a62b29a1dd.png?1656398883614",
          txt: "音响",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/dd788bc155dbdf477a7367e0b4980332.png?1656398891828",
          txt: "智能眼镜",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/f6814642bf1076be5964877858814b23.png?1658396367877",
          txt: "平板电脑",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/d0938112ecf5900db04e8fec107cca90.png?1656398851715",
          txt: "智能手表",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/6adff3a46748370af64983c0806a430a.png?1656398875737",
          txt: "笔记本",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/9c1ba73ac562c41cef14e060f39ccbd4.png?1656398836300",
          txt: "投影仪",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/7ce50554013cffc3141f85b4bf9944b9.png?1666948451314",
          txt: "查看更多",
        },
      ],
      obj: [
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/55e07e89c459e4a108f5f238f8b8962a.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/d5f6803c7201c9b7fdebd4d69050297c.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/5c53ae678fec8468e7562f82db02d0c5.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/ad16a8a9cefe7a3f70d74fabb3e1213b.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/61cf7271c9fd82fa00e5b84d5ab7caee.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/45392baea51e61754e2f69c6a85bd1b8.png",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/6a5564362cae4004a5e435ce08efe829.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/67c5fac4f12d3d947f6be1fec7490b86.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/2e808a826b4b88aad888a90e9f9c1798.jpg",
        "https://pic.cdfgsanya.com/assets/upload/brandlogo/961294350a76361a2456741245f80b9c.jpg",
      ],
      value: ""
    };
  },
  methods: {
    fun() {
      //方法1:
      this.$router.push("/home");
    },
    swp() {
      //方法1:
      this.$router.push("/Gcss");
    },
  },
};
</script>

<style scoped>
.gcsspage {
  background-color: gainsboro;
}

.gcsspageone {
  width: 100%;
  height: 50px;
  background-color: white;
  text-align: center;
  line-height: 50px;
  position: relative;
  position: fixed;
  z-index: 999;
}

.gcsspageone>span {
  font-size: 20px;
}

.gcsspagetwo {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
}

.gcsspagethree {
  width: 350px;
  /* height: 100px; */
  margin: 0 auto;
  margin-bottom: 10px;
}

.gcsspagefour {
  width: 350px;
  margin: 0 auto;
}

.gcsspagefive {
  padding: 10px;
}

.gcsspagefive>span {
  font-weight: 700;
  /* margin-bottom: 10px; */
}

.gcsspagefive1 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.gcsspagefive2 {
  width: 20%;
}

.gcsspagefive2>img {
  width: 100%;
}
</style>